<!-- 自助核销 -->
<template>
	<view class="pages">
		<!-- 使用流程 -->
		<view class="banner-box">
			<view class="banner-title fc-3 fw-6 fs-lg">
				使用流程
			</view>
			<view class="row-box">
				<view class="process-item fcc" v-for="(item,index) in processList" :key="index">
					<image :src="item.img" mode="scaleToFill" class="process-img"></image>
					<text class="process-text fc-9 mt-10">{{item.text}}</text>
					<view class="process-link" v-if="index<3"></view>
				</view>
			</view>
		</view>

		<view class="code-box pages-card">
			<view class=" mt-20 mb-20 fcc fc-3 fw-6 fs-lg">
				扫一扫提货
			</view>
			<view class="code-box-images ">
				<image src="/static/images/logo.png" mode="scaleToFill"></image>
			</view>
			<view class="code-box-tips fcc">
				扫码提货，立等可取，感谢耐心等候！
			</view>
			<view class="row-box">
				<view class="">
					<view class="store-item flex align-items-center">
						<text class="mr-30 fc-9">自提门店</text>
						<text class="fc-3">莱山万科御龙山店</text>
					</view>
					<view class="store-item flex align-items-center">
						<text class="mr-30 fc-9">核销人员</text>
						<text class="fc-3">微信用户昵称</text>
					</view>
				</view>
			</view>
		</view>

		<view class="pages-tips flex align-items-center justify-content-center">
			<view class="text fc-9">
				查看订单
			</view>
			<view class="link">

			</view>
			<view class="text fc-9">
				分享一下
			</view>
		</view>
		<!-- 技术支持 -->
		<p-support class=""></p-support>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		computed: {
			processList() {
				return [{
					title: '',
					text: '将二维码贴于店铺门前',
					img: '/static/images/verification/p-icon-1.png'
				}, {
					title: '',
					text: '顾客扫一扫快速打开提货码',
					img: '/static/images/verification/p-icon-2.png'
				}, {
					title: '',
					text: '店员扫码核销/买家确认收货',
					img: '/static/images/verification/p-icon-3.png'
				}, {
					title: '',
					text: '成功完成核销流程',
					img: '/static/images/verification/p-icon-4.png'
				}];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner-box {
		width: 710rpx;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 0 20rpx 20rpx;
		background-image: linear-gradient(0, #fff, #FFF6E0);

		.banner-title {
			line-height: 100rpx;
		}

		.process-item {
			position: relative;

			.process-img {
				width: 88rpx;
				height: 88rpx;
			}

			.process-text {
				width: 130rpx;
				text-align: center;
				font-size: 20rpx;
				line-height: 28rpx;
			}

		}

		.process-link {
			width: 72rpx;
			height: 4rpx;
			background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 60%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			position: absolute;
			top: 42rpx;
			left: 120rpx;
		}

	}

	.pages-card {
		margin: 20rpx auto;
	}

	.code-box {

		.code-box-images {
			width: 350rpx;
			height: 350rpx;
			border-radius: 12rpx;
			border: 1px solid #ccc;
			padding: 20rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.code-box-tips {
			height: 88rpx;
		}

		.store-item {
			height: 66rpx;
		}
	}

	.pages-tips {
		height: 100rpx;

		.text {
			padding: 0 40rpx;
		}

		.link {
			height: 32rpx;
			width: 1rpx;
			background: #ccc;
		}
	}
</style>